<template>
    <admin-container :loading="loading">
        <el-form label-width="100px" @submit.prevent.native="onSubmit">
            <div v-for="group in tree" :key="group.id">
                <h3 class="config-title">{{ group.title }}</h3>
                <template v-for="item in group.children">
                    <el-form-item :key="item.id"
                                  v-if="getVisible(item)"
                                  :label="item.title">
                        <settings-component :value="item.value"
                                            :item="item"
                                            :data="list"
                                            @input="onSetValue(item, $event)"/>
                    </el-form-item>
                </template>
            </div>

            <el-form-item>
                <el-button type="primary" native-type="submit" :loading="subing">保存</el-button>
            </el-form-item>
        </el-form>
    </admin-container>
</template>

<script lang="ts">
import { Vue, Component, Watch } from 'vue-property-decorator';
import AdminContainer from '@/components/admin-container.vue';
import { getConfigList, postConfig } from '@/services/config.service';
import { ConfigModel } from '@/models/config.model';
import SettingsComponent from '@/views/system/setting/component.vue';
import { SystemModule } from '@/store/system';
@Component({
    components: { SettingsComponent, AdminContainer}
})
export default class SettingIndex extends Vue {
    loading: boolean = true;
    list: ConfigModel[] = [];
    form: {[key: number]: any} = {};
    subing: boolean = false;

    mounted() {
        this.fetchData();
    }

    get keys(): any {
        let keys: any = {};
        this.list.filter(_ => _.grouping).map((item: any) => {
            keys[item.grouping + '.' + item.key] = item.value;
        });
        return keys;
    }

    get tree() {
        return this.$array.tree(this.list, 'key', 'grouping');
    }

    fetchData() {
        this.loading = true;
        getConfigList()
            .finally(() => {
                this.loading = false;
            })
            .then((res) => {
                this.list = res.data;
            })
    }

    getValue(key: string): any {
        return this.keys[key];
    }

    /**
     * 是否显示控件
     */
    getVisible(item: ConfigModel): boolean {
        if (!item.visible_condition) {
            return true;
        }
        let tmps = item.visible_condition.split(',');


        for (let i = 0; i < tmps.length; i++) {
            let l, r;
            if (tmps[i].includes('=')) {
                [l, r] = tmps[i].split('=', 2);
                if (this.getValue(l) != r) {
                    return false;
                }
            } else if (tmps[i].includes('!')) {
                [l, r] = tmps[i].split('!', 2);
                if (this.getValue(l) == r) {
                    return false;
                }
            }
        }
        return true;
    }

    // 设置更新值
    onSetValue(item: ConfigModel, value: any) {
        this.$set(this.form, item.id, value);
        item.value = value;
        const idx = this.list.findIndex(_ => _.id === item.id);
        if (idx > -1) {
            this.list.splice(idx, 1, { ...item })
        }
    }

    // 提交保存
    onSubmit() {
        if (Object.keys(this.form).length === 0) {
            this.$message.success('保存成功')
            return;
        }
        this.subing = true;
        postConfig(this.form)
            .finally(() => {
                this.subing = false;
            })
            .then(() => {
                this.$message.success('保存成功');
            })
    }
}
</script>

<style scoped lang="scss">
.config-title {
    padding: 20px;
}
</style>
